<template>
    <h-section title="变更流程" collapse>
        <a-table rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="false" @change="handleTableChange">
            <template #changeType="{ record }">
                {{ $filters.valToNameFilter('changeType', record.changeType) }}
            </template>
            <template #level="{ record }">
                {{ $filters.valToNameFilter('changeLevel', record.level) }}
            </template>
            <template #status="{ record }">
                {{ $filters.valToNameFilter('changeRequireStatus', record.status) }}
            </template>
            <template #action="{ record }">
                <a @click.stop="showDetail(record.id)">详情</a>
            </template>
        </a-table>
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import { useTableLoading, usePagination, useTableColumns, useTableData, useTableAction } from '@/components/Table/hooks';
import { defineComponent } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('requireChange');
        const { list, setList, handleTableChange } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'requireChange');
        const { showDetail } = useTableAction('requireChange');
        const init = async (query) => {
            const { success, moule } = await api.requireChangeModel.findByRequireIdAndType(query);
            if (success) {
                setList([...moule]);
            }
        };
        init({
            id: props.detail.id,
            type: 2
        });
        return {
            showDetail,
            open,
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
    .table-toolbar-wrap {
        margin: 16px 0;
    }
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>